<template>
    <div class="detail-container" v-loading="loading">
        <el-card shadow="never" style="margin-top: 15px;position: relative">

            <div class="operate-container">
                <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
                <span class="color-danger" v-if="orderInfo.local">当前订单状态：{{orderInfo.local.orderState | fifstate}}</span>
            </div>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">基本信息</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
                <el-form  size="mini" label-width="150px" class="minRoW">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="订单编号：">{{orderInfo.orderId}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订单状态：">
                              <div v-if="orderInfo.local">{{orderInfo.local.orderState | fifstate}}</div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="是否为指派订单："> {{orderInfo.assignOrder | fifassignOrder}} </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="货源号：">{{orderInfo.cargoId}} </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订金是否担保：">{{orderInfo.depositEnsure == 1 ?  '订金担保' : orderInfo.depositEnsure == 2 ? '非订金担保' : '--'}}</el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="订金是否退还：" v-if="orderInfo.local">{{orderInfo.local.isReturnDeposit == 1 ?  '退还' : '不退还'}}</el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="8">
                        <el-form-item label="订金金额：" v-if="orderInfo.local">{{orderInfo.local.deposit}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="订金状态：">{{orderInfo.depositStatus | fifdepositStatus}}</el-form-item>
                      </el-col>
<!--                      <el-col :span="8">-->
<!--                        <el-form-item label="订金支付时间："></el-form-item>-->
<!--                      </el-col>-->
                      <el-col :span="8">
                        <el-form-item label="订单是否冻结：">{{orderInfo.frozenOrder | fiffrozenOrder}} </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>

                      <el-col :span="8">
                        <el-form-item label="最新冻结时间：">{{orderInfo.lastFrozenTime | formatTime}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="订单更新时间："> {{ orderInfo.lastUpdateTime | formatTime}}</el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="订单创建时间：">{{orderInfo.createTime | formatTime}}</el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>

                      <el-col :span="8">
                        <el-form-item label="销售订单号：">
                          <el-link v-if="orderInfo.local" @click="toOrderDetail(orderInfo.local.orderId)" type="primary">{{orderInfo.local.orderSn}}</el-link>
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item label="发货单号：">
                          <el-link v-if="orderInfo.local" @click="toDeliverCon(orderInfo.local.deliverId)" type="primary">{{orderInfo.local.deliverSn}}</el-link>
                        </el-form-item>
                      </el-col>
<!--                      <el-col :span="8">-->
<!--                        <el-form-item label="协议状态："></el-form-item>-->
<!--                      </el-col>-->
<!--                      <el-col :span="8">-->
<!--                        <el-form-item label="保额信息："></el-form-item>-->
<!--                      </el-col>-->
                    </el-row>
                    <el-row>

<!--                      <el-col :span="8">-->
<!--                        <el-form-item label="投保状态："></el-form-item>-->
<!--                      </el-col>-->
                    </el-row>
                </el-form>
            </el-card>
            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">运费信息</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
              <el-form  size="mini" label-width="150px" class="minRoW">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="运费金额：" v-if="orderInfo.local">{{orderInfo.local.freight}}</el-form-item>
                  </el-col>
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="运费状态：">-->

<!--                    </el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="支付时间："> </el-form-item>-->
<!--                  </el-col>-->
                </el-row>
<!--                <el-row>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="预付费用："> </el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="到付费用："></el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="回单付："></el-form-item>-->
<!--                  </el-col>-->
<!--                </el-row>-->
<!--                <el-row>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="预付油费："> </el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="服务费："></el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="订金描述："></el-form-item>-->
<!--                  </el-col>-->
<!--                </el-row>-->
              </el-form>
            </el-card>

            <div style="margin-top: 20px">
                <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                <span class="font-small">货源信息</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
            <el-form  size="mini" label-width="150px" class="minRoW">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="货物名称："><div v-if="orderInfo.cargoInfo">{{orderInfo.cargoInfo.cargoName}}</div></el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="重量/体积："><div v-if="orderInfo.cargoInfo">{{orderInfo.cargoInfo.goodsRangeWeight}}</div></el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="车型/车长：" v-if="orderInfo.local">{{orderInfo.local.truckType}},{{orderInfo.local.truckLength}}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="用车类型：" v-if="orderInfo.local">{{orderInfo.local.lclCargo == 0 ? '整车' : '零担货源'}}</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="装卸方式：">一装一卸</el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="支付方式：" v-if="orderInfo.local">{{orderInfo.local.payMethod | fifpayMethod}}</el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="备注："><div v-if="orderInfo.local">{{orderInfo.local.sourceRemark}}</div></el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

            <div style="margin-top: 20px">
              <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
              <span class="font-small">司机信息</span>
            </div>
            <el-card shadow="never" style="margin-top:20px;">
              <el-form  size="mini" label-width="150px" class="minRoW">
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="司机姓名："><div v-if="orderInfo.driverInfo">{{orderInfo.driverInfo.nickName}}</div></el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="车牌号："><div v-if="orderInfo.local">{{orderInfo.local.truckNo}}</div></el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="手机号："><div v-if="orderInfo.driverInfo">{{orderInfo.driverInfo.driverMobilePhone}}</div></el-form-item>
                  </el-col>
                </el-row>
<!--                <el-row>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="代收司机姓名："> </el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->
<!--                    <el-form-item label="代收司机手机号："></el-form-item>-->
<!--                  </el-col>-->
<!--                  <el-col :span="8">-->

<!--                  </el-col>-->
<!--                </el-row>-->
              </el-form>
            </el-card>

          <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">轨迹信息</span>
          </div>
          <el-card shadow="never" style="margin-top:20px;">
            <el-form  size="mini" label-width="80px" class="minRoW">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="装货地：">
                    <div v-if="orderInfo.cargoInfo">{{orderInfo.cargoInfo.loadAddress}}</div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="卸货地：">
                    <div v-if="orderInfo.cargoInfo">{{orderInfo.cargoInfo.unLoadAddress}}</div>
                  </el-form-item>
                </el-col>
              </el-row>
<!--              <trajectoryMap2 ref="trajectoryMap2"></trajectoryMap2>-->
            </el-form>
          </el-card>

          <div style="margin-top: 20px">
            <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
            <span class="font-small">附件信息</span>
          </div>
          <el-card shadow="never" style="margin-top:20px;">
               <div>
                  <img :src="item.picUrls" v-for="(item ,index) in orderInfo.picInfoList" :key="index" @click="fullImg(item.picUrls)"/>
               </div>
               <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="!orderInfo.picInfoList">- 暂无数据 -</div>
          </el-card>

          <div style="margin-top: 20px;clear: both">
            <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
              <el-menu-item index="1">操作记录</el-menu-item>
<!--              <el-menu-item index="2">变更记录</el-menu-item>-->
            </el-menu>
          </div>
          <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
            <div>
              <el-timeline>
                <el-timeline-item
                  v-for="(item, index) in orderInfo.logList"
                  :key="index">
                         <div>
                              <div style="color:#aaa;">{{item.logTime}}</div>
                              <div style="margin-top:10px;">{{item.logTitle}}</div>
                         </div>
                </el-timeline-item>
              </el-timeline>
              <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.logList == 0">- 暂无数据 -</div>
            </div>
          </div>
        </el-card>

        <!--放大图片-->
        <el-dialog
          :visible.sync="dialogVisible4"
          width="800px">
          <img :src="fullSrc" style="width:100%;"/>
        </el-dialog>

    </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import axios from 'axios'
    import {getCustomerSetting, getOrdersShow,postOrdersprocess,ordersRemark,getQiniuToken,uploadOrderImg,addDriverOrder,searchLimit,getSyncOneOrder,changeOtherRemark,ordDeliverGoods} from '@/api/partner'
    import zhoufei from '@/assets/images/zhuofei.png'
    // import trajectoryMap2 from '@/views/components/trajectoryMap2'
    import {validateCommission} from '@/utils/validate';
    import {driverPosition, ymmOrderInfo} from "../../api/partner";
    const defauleQuitForm={
        driverId:0,
        orderId:'',
        driverName:'',
        driverMobile:'',
        driverCardNo:'',
        deliveryNum:'',
        deliveryRemark:'',
        deliveryTime:'',
        driverChargeUser:'',
    }
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value > 99999999){
                    callback(new Error('最大值为99999999'))
                }else {
                    callback()
                }
            };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                orderId:this.$route.query.id,
                orderInfo:{},
                btnLoading:false,
                rules:{
                    inputFreight:[{required: true, trigger: 'blur' ,message: '此项必填',}],
                },
                zhoufei:zhoufei,
                logTab:'1',
                orderLogs:[],
                map:null,
                marker:null,
                orderPositionInfos:[],
                lineArr: [],
                dialogVisible4:false,
                fullSrc:'',

            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId'
            ]),
        },
        created() {
          this.getPageInfo();
        },
        components : {
          // trajectoryMap2:trajectoryMap2
        },
        watch:{
            '$route'(to,from){
                this.orderId = this.$route.query.id;
                this.getPageInfo();
            }
        },
        filters: {
            formatTime(time) {
              if(time){
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm')
              }else{
                return ''
              }

            },
          fifassignOrder(val){
            if(val == 1){
              return '指派单'
            }else if(val == 2){
              return '非指派单'
            }else{
              return '--'
            }
          },
          fiffrozenOrder(val){
            if(val == 1){
              return '冻结中'
            }else if(val == 2){
              return '未冻结'
            }else{
              return '--'
            }
          },
          fifdepositStatus(val){
            if(val == 'unPaied'){
              return '未支付'
            }else if(val == 'paying'){
              return '支付中'
            }else if(val == 'paidToPlatform'){
              return '已支付到平台'
            }else if(val == 'payConfirming'){
              return '支付确认中'
            }else if(val == 'paidToPayee'){
              return '已到收款方'
            }else if(val == 'refunding'){
              return '退款中'
            }else if(val == 'refunded'){
              return '已退款'
            }else if(val == 'cancelled'){
              return '交易取消'
            }else{
              return '--'
            }
          },

          fifamount(val){
              return parseInt(val/100)
          },

          fifstate(val){
            if(val == 0){
              return '已成交'
            }else if(val == 10){
              return '已取消'
            }else if(val == 20){
              return '已装货'
            }else if(val == 30){
              return '已收货'
            }else if(val == 40){
              return '已回单'
            }else if(val == 50){
              return '已完成'
            }
          },
          fifpayMethod(val){
            if(val == 4){
              return '到付+回单'
            }else if(val == 5){
              return '全额到付'
            }else if(val == 6){
              return '全额回单'
            }else {
              return '--'
            }
          },
        },
        methods:{
          fullImg(src){
            this.dialogVisible4 = true;
            this.fullSrc = src;
          },


          //查看发货单
          toDeliverCon(deliverId){
            let routeData = this.$router.resolve({name:'deliverCon',query:{id:deliverId,type:'edit'}});
            window.open(routeData.href);
          },

          //查看订单
          toOrderDetail(orderId){
            let routeData = this.$router.resolve({name:'deliverOrderInfo',query:{id:orderId}});
            window.open(routeData.href);
          },

          //获取合同详情
          getPageInfo(){
              this.loading = true;
              ymmOrderInfo({ymmOrderId:this.$route.query.ymmOrderId}).then(res=>{
                  this.orderInfo = res;
                  // this.$refs.trajectoryMap2.showMap(this.$route.query.ymmOrderId,this.orderInfo.local.orderState)
                  this.loading = false;
              });
          },
        }
    }
</script>

<style  lang="scss">
    .detail-container {
        width: 90%;
        padding: 20px 20px 20px 20px;
        margin: 20px auto;
        .el-card__header{
            background: #f8f8f8;
            .kehu-name{
                display: inline-block;
                font-size:14px;
                vertical-align: middle;
            }
            .kehu-label{
                font-size:12px;
                vertical-align: middle;
                display: inline-block;
                margin-left:15px;
                color: #409eff;
                background: #ecf5ff;
                border: 1px solid #b3d8ff;
                height:24px;
                line-height: 24px;
                padding:0 10px;
                border-radius: 5px;
            }
            .kehu-info{
                text-align: right;
                font-size: 12px;
                color:#333;
                line-height: 20px;
                span{
                    padding-left:16px;
                }
            }
        }
        .operate-container {
            background: #F2F6FC;
            height: 80px;
            margin: -20px -20px 0;
            line-height: 80px;
        }
    }
    .price-block{
        font-size:12px;
        line-height:30px;
        .lab{
            display: inline-block;
            width:100px;
            text-align: right;
        }
        .text{
            display: inline-block;
        }
    }
    .minRoW .el-form-item{
        margin-bottom:5px;
    }
    .red-form{
        .el-form-item__label{
            color:red
        }
    }
    .tongJitable{
        border-left:1px solid #EBEEF5;
        border-top:1px solid #EBEEF5;
        font-size:12px;
        margin-bottom:20px;
        td{
            border-right:1px solid #EBEEF5;
            border-bottom:1px solid #EBEEF5;
            div.tddiv{
                min-height: 30px;
                line-height: 30px;
                padding:0 5px;
                text-align: center;
                white-space:  nowrap
            }
        }
        .bgtd{
            background: #f5f7fa;
        }
    }

    .title-tab{
        border-radius: 8px;
        background: #eee;
        margin-left: 10px;
        display: inline-block;
        vertical-align: middle;
        line-height: 20px;
        padding: 0 5px;
        color: #666;
    }
    .blurth{
        background:#e21717;
        color:#fff
    }

    .marker-block{
      text-align: center;
      display: inline-block;
      .marker-point{
        background: #fff;
        border-radius: 5px;
        border:2px solid #eb4829;
        color:#000;
        font-size:14px;
        display: inline-block;
        white-space:nowrap;
        line-height: 22px;
        .label {
          display: inline-block;
          padding:0 5px;
          background: #eb4829;
          color: #fff;
          text-align: left;
        }
        .text{
          display: inline-block;
          padding:0 5px;
          text-align: left;
        }
      }

    }
    .marker-block.start{
      .marker-point{
        border:2px solid #0d88fc;
        .label {
          background: #0d88fc;
        }
      }
    }
    .doing.marker-block{
      text-align: left;
      position: relative;
      //padding-left:50px;
      .marker-point{
        .text{
          padding:0 10px;
          vertical-align: middle;
        }
        .label{
          vertical-align: middle;
        }
      }
      .marker-img{
        position: absolute;
        left:-37px;
        top:0
      }
    }

</style>
